2024 iThome 鐵人賽

DAY 23

Modern Web

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 23 篇

:not 不選擇的藝術，如何用 CSS 控制排除

16th鐵人賽 :not css css選擇器反選偽類

Lala Code

2024-10-07 01:32:22

491 瀏覽

分享至

:not

:not 選擇器可以選取不符合指定選擇器的元素，主要功能是排除符合特定選擇器的元素，這讓我們能夠將樣式應用於那些不符合條件的元素，也稱為是「反選偽類」或「否定偽類」(negation pseudo-class)。

💠`:not` 基本用法

語法

選擇器:not(排除的選擇器) {
  屬性名: 屬性值; 
}

選取「不符合」指定選擇器的元素

範例一：排除特定類別的元素

假設我們想要將所有 <p> 元素設置成藍色，但排除 class="apple" 的段落：

<p>空白段落</p>
<p class="apple">apple</p>
<p class="not-apple">not-apple</p>
<div class="apple">apple</div>

p:not(.apple) {
  color: royalblue;
}

排除特定類別的元素

除了具有 apple 類別的段落，其他 <p> 會變成藍色。

範例二：排除特定屬性的元素

選中 <div> 底下的子元素 <p>，但排除 title 屬性值以 apple 開頭的元素

<div>
  <p title="apple">🍎title is apple</p>
  <p>apple</p>
  <p title="not-apple">not-apple</p>
</div>

div > p:not([title^="apple"]) {
	color: royalblue;
}

排除特定屬性的元素

只有 title 不是以 apple 開頭的 <p> 會變成藍色

範例三：排除第一個子元素

選中 <div> 底下的子元素 <p>，但排除第一個子元素，只有不是第一個的 <p> 元素將會變為藍色

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ul > li:not(:first-child) {
	color: royalblue;
}

排除第一個子元素

💠`:not` 的無效或不合理用法

一、排除所有元素

不管怎樣永遠都不會有任何元素選中，很顯然這種寫法是很不合理的

:not(*) {
  color: red;
}

二、沒有選擇任何選擇器，並排除所有有 apple 的類別

<p class="apple">apple</p>

:not(.apple) {
  background-color: skyblue; 
}

not

你會發現，apple 類別背景色還是變色了，這其實不是無效，是因為排除 apple 類別也包含了 <html>、<body> ，所有沒有 apple 類別的元素都會被加上背景色

三、後代選擇器的使用

<div>
  <a href="#">div 的 a 元素</a>
</div>

<div>
  <p>
    <a href="#">div p 的 a 元素</a>
  </p>
</div>

<a href="#">一般的 a 元素</a>

body :not(div) a {
  color: red;
}

not

如果你是這樣寫，將會選中非 <div> 包住的 <a>

第一行的 <a> 不會被選中，因為是 <div> 包住的 <a> ，這沒什麼疑慮
第二行的 <a> 文字將會變成紅色，這是因為 <p> 也符合 :not(div) 的條件
第三行的 <a> 不會被選中，因為它並沒有被任何元素包住

如果想排除 <div> 下所有的 <a>，你應該這樣寫

body :not(div a) {
  color: red;
}

not

這麼一來，所有在 <div> 底下的 <a> 都會被排除

四、選擇器列表使用到無效的選擇器，將全部無效

<div>
  <p class="apple">🍎apple</p>
  <p>not-apple</p>
</div>

p:not(.apple, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

not

還記得我們在選擇器列表時講的嗎？如果希望忽略無效的選擇器，讓有效選擇器執行效果，我們應該使用 :is

p:not(:is(.apple, :invalid-pseudo-class)) {
  color: red;
  font-style: italic;
}

not

如此一來，就可以選中排除 apple 類別的 <p> 囉！

💠實務應用：按鈕樣式

一起試試：［CODEPEN］

我們可以使用 :not() 為不同按鈕類型設定樣式。例如，對一般按鈕設置一種樣式，對提交按鈕設置另一種樣式：

<button type="button">按鈕 1</button>
<button type="button">按鈕 2</button>
<button type="submit">提交按鈕</button>

button:not([type="submit"]) {
  background-color: skyblue;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
}

button[type="submit"] {
  background-color: green;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
}

not